# Slider

## Installation
`npm i @snack-uikit/slider`

[Changelog](./CHANGELOG.md)



[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Slider
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - |  |
| keyboard | `boolean` | - |  |
| autoFocus | `boolean` | - |  |
| onFocus | `(e: FocusEvent<HTMLDivElement, Element>) => void` | - |  |
| onBlur | `(e: FocusEvent<HTMLDivElement, Element>) => void` | - |  |
| range | `boolean` | - |  |
| count | `number` | - |  |
| min | `number` | - |  |
| max | `number` | - |  |
| step | `number` | - |  |
| value | `number \| number[]` | - |  |
| defaultValue | `number \| number[]` | - |  |
| onChange | `(value: number \| number[]) => void` | - |  |
| onBeforeChange | `(value: number \| number[]) => void` | - | @deprecated It's always better to use `onChange` instead |
| onAfterChange | `(value: number \| number[]) => void` | - | @deprecated Use `onChangeComplete` instead |
| onChangeComplete | `(value: number \| number[]) => void` | - |  |
| allowCross | `boolean` | - |  |
| pushable | `number \| boolean` | - |  |
| draggableTrack | `boolean` | - | range only |
| reverse | `boolean` | - |  |
| included | `boolean` | - |  |
| startPoint | `number` | - |  |
| marks | `Record<string \| number, ReactNode \| MarkObj>` | - |  |
| dots | `boolean` | - |  |
| tabIndex | `number \| number[]` | - |  |
| ariaLabelForHandle | `string \| string[]` | - |  |
| ariaLabelledByForHandle | `string \| string[]` | - |  |
| ariaValueTextFormatterForHandle | `AriaValueFormat \| AriaValueFormat[]` | - |  |
| handleTip | `boolean` | - |  |
| tipFormatter | `(value: string \| number) => ReactNode` | - |  |


[//]: DOCUMENTATION_SECTION_END
